<template>
  <div class="amazing-wrap" style="width:1200px">

    <br />
    <el-card>
      <el-form v-show="!table" label-width="100px">
        <el-form-item label="用户名" v-if="this.editing">
          <el-input
            v-model="model.username"
            placeholder="请输入用户名"
            size="mini"
            disabled
          />
        </el-form-item>

        <el-form-item label="选择学院">
          <el-select
            v-model="model.stuFaculty"
            placeholder="请选择学院"
            size="mini"
            @change="handleChange"
          >
            <el-option
              v-for="item in options"
              :key="item.department_id"
              :label="item.department_name"
              :value="item.department_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择专业">
          <el-select
            v-model="model.stuMajor"
            placeholder="请选择专业"
            size="mini"
            @change="handleChange1"
          >
            <el-option
              v-for="item in options2"
              :key="item.major_id"
              :label="item.major_name"
              :value="item.major_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择班级">
          <el-select
            v-model="model.stuClass"
            placeholder="请选择班级"
            size="mini"
          >
            <el-option
              v-for="item in options4"
              :key="item.class_id"
              :label="item.class_name"
              :value="item.class_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用户姓名" v-if="this.editing">
          <el-input
            v-model="model.nickname"
            placeholder="请输入用户姓名"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="用户性别" v-if="this.editing">
          <el-radio-group v-model="model.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传用户头像" v-if="this.editing">
          <input type="file" accept="image/*" @change="uploading" />
        </el-form-item>
        <el-form-item label="头像预览" v-if="this.editing">
          <el-image
            :src="baseImg + model.avatar"
            style="width: 100px; height: 100px"
            fit="cover"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="success" @click="handleConfirm(2)"
            >保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>


export default {
  components: {

  },
  data() {
    return {
      tableData: [],
      table: false,
      editing: true,
      currentPage: 1,
      loading: false,
      pageSize: 20,
      total: 0,
      options: [],
      selected: -1,
      searchText: "",
      model: {
        nickname: "",
        sex: "",
        phone: "",
        avatar: ""
      },
      baseImg: process.env.VUE_APP_IMG_URL,
      options1: [],
      options2: [],
      options3: [],
      options4: []
    };
  },
  async mounted() {
    this.fetch();
    this.getUserInfo();
    this.bFetch();
    this.bFetch1();
    this.bFetch3();
  },
  watch: {

  },
  methods: {
    handleChange(value) {

      this.options2 = this.options1.filter(it => it.faculty == value);
      this.model.stuMajor = "";
      this.model.stuClass = "";
    },
    handleChange1(value) {

      this.options4 = this.options3.filter(it => it.major_id == value);
      this.model.stuClass = "";
    },
    async bFetch3() {
      const { data } = await this.$http.getClass({
        page: this.currentPage,
        limit: 10000
      });
      this.options3 = data;
      this.options4 = data;
    },
    async bFetch1() {
      const { data } = await this.$http.getMajor();
      this.options1 = data;
      this.options2 = data;
    },
    async bFetch() {
      const { data } = await this.$http.getDepartment();
      this.options = data;
    },
    async getUserInfo() {
      const { data } = await this.$http.getUserInfo();

      this.userInfo = data;
      this.model = data;
    },
    handleEdit(data) {
      this.editing = true;
      this.model = data;
      this.table = false;
    },
    async fetch() {
      this.loading = true;
      const data = await this.$http.getAllUser({
        page: this.currentPage,
        limit: this.pageSize
      });
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--;
        this.fetch();
      }
      this.tableData = data.data;
      this.total = data.total;
      this.loading = false;
    },
    handleDelete(row) {
      this.$confirm("是否确定删除该用户", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await this.$http.deleteUserInfoById({
            user_id: row.user_id
          });

          this.$message.success("删除成功！");
          this.fetch();
        })
        .catch(() => {});
    },
    openAdd() {
      this.model = {
        nickname: "",
        sex: "",
        phone: "",
        avatar: ""
      };

      this.editing = false;
      this.table = !this.table;
    },
    goEdit(data) {
      this.editing = true;
      this.model = data;

      this.table = false;
    },
    async handleConfirm(type) {
      if (this.model.nickname === "") {
        return this.$message.info("请输入用户昵称");
      }
      if (this.isEditing && this.model.avatar === "") {
        return this.$message.info("请上传用户头像");
      }

      if (!this.isEditing && this.model.username === "") {
        return this.$message.info("请输入用户名");
      }

      const { data, code } = await this.$http.setUserInfoById(this.model);
      if (code === 400) {
        return this.$message.error("原密码错误");
      }

      this.$message.success("操作成功！");

    },
    handleSearchRadio() {
      this.searchText = "";
      this.currentPage = 1;
      this.fetch();
    },
    handleSearchAll() {
      this.currentPage = 1;
      this.selected = -1;
      this.fetch();
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.fetch();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetch();
    },
    getImg(e) {
      this.model.avatar = e;
    },
    async rank(type, index) {
      if (type === 1) {
        if (index === 0) {
          return;
        }
        await this.$store.dispatch("project/setNews", {
          organization_id: this.tableData[index].organization_id,
          sort: this.tableData[index - 1].sort
        });
        await this.$store.dispatch("project/setNews", {
          organization_id: this.tableData[index - 1].organization_id,
          sort: this.tableData[index].sort
        });
      } else {
        if (index === this.tableData.length - 1) {
          return;
        }
        await this.$store.dispatch("project/setNews", {
          organization_id: this.tableData[index].organization_id,
          sort: this.tableData[index + 1].sort
        });
        await this.$store.dispatch("project/setNews", {
          organization_id: this.tableData[index + 1].organization_id,
          sort: this.tableData[index].sort
        });
      }
      this.$message.success("修改排序成功！");
      this.fetch();
    },
    goTop(organization_id) {
      this.$confirm("是否将其置顶", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await this.$store.dispatch("project/setNews", {
            organization_id,
            sort: this.max + 1
          });
          this.$message.success("置顶成功！");
          this.fetch();
        })
        .catch(() => {});
    },
    // 全局推送
    pushs(data) {
      this.$confirm("是否确定推送此消息给app?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await this.$store.dispatch("project/pushs", {
            title: data.title,
            fuTitle: data.fuTitle
          });
          this.$message({
            type: "success",
            message: "推送成功!"
          });
        })
        .catch(() => {});
    },
    async uploading(e) {
      if (e.target.files.length === 0) {
        return;
      }
      const formData = new FormData();
      formData.append("file", e.target.files[0]);
      const data = await this.$http.upload(formData);
      this.model.avatar = data.filename;
    }
  }
};
</script>

<style></style>
